<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import { request } from '../../../common/http';
import { ApiUrl } from '../../../common/ApiUrl';

let noticeStatus = ref({});

onShow(() => {
	getNoticeStatus();
})

const getNoticeStatus = () => {
	request({
		url: ApiUrl.UserUrl + '/findPublicNumberStatusById'
	}).then(res => {
		noticeStatus.value = res.data;
	})
}

const handleChecked1 = (e) => {
	noticeStatus.value.shipmentFailureNotice = e.detail.value
	updateStatus();
}

const handleChecked2 = (e) => {
	noticeStatus.value.shippingSuccessNotice = e.detail.value
	updateStatus();
}

const handleChecked3 = (e) => {
	noticeStatus.value.outOfStockNotice = e.detail.value
	updateStatus();
}

const handleChecked4 = (e) => {
	noticeStatus.value.deviceOfflineNotice = e.detail.value
	updateStatus();
}

const updateStatus = () => {
	request({
		url: ApiUrl.UserUrl + '/updateModificationNoticeById',
		method: 'put',
		data: {
			...noticeStatus.value
		}
	}).then(res => {
		if (res.status && res.data > 0) {
			uni.showToast({
				icon: 'none',
				title: '更新成功!'
			})
		} else {
			uni.showToast({
				icon: 'error',
				title: '更新失败!'
			})
		}
	})
}

</script>

<template>
  <view class="notification_wrap">
    <view class="form">
      <view class="form_item">
        <text class="label">出货失败通知</text>
        <text class="desc">设备出货失败时提醒</text>
        <switch color="#EE7161" :checked="noticeStatus?.shipmentFailureNotice" @change="handleChecked1" />
      </view>
    </view>
    <view class="form">
      <view class="form_item">
        <text class="label">购买成功通知</text>
        <text class="desc">用户购买成功时提醒</text>
        <switch color="#EE7161" :checked="noticeStatus?.shippingSuccessNotice" @change="handleChecked2" />
      </view>
    </view>
    <view class="form">
      <view class="form_item">
        <text class="label">缺货通知</text>
        <text class="desc">设备缺货时提醒</text>
        <switch color="#EE7161" :checked="noticeStatus?.outOfStockNotice" @change="handleChecked3" />
      </view>
    </view>
    <view class="form">
      <view class="form_item">
        <text class="label">设备离线通知</text>
        <text class="desc">设备离线时提醒</text>
        <switch color="#EE7161" :checked="noticeStatus?.deviceOfflineNotice" @change="handleChecked4" />
      </view>
    </view>
  </view>
</template>

<style lang='scss'>
.notification_wrap {
	width: 750rpx;
	height: 100vh;
	background: #F8F9FB;
	overflow: hidden;
	.form {
		margin-top: 24rpx;
		box-sizing: border-box;
		width: 750rpx;
		height: 96rpx;
		padding: 0 40rpx;
		background: #ffffff;
		.form_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #3B3D3D;
				line-height: 33rpx;
				margin-right: 28rpx;
			}
			.desc {
				flex: 1;
				font-size: 28rpx;
				color: #B6BDBD;
				line-height: 33rpx;
			}
		}
	}
}
</style>